<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img v-lazy="pageImgArr[0]" alt="">
        <span id="share" @click="shareForWechat">分享</span>
      </div>
    </div>
    <div class="goods-wrapper">
      <div class="goods-menu">
        <img v-lazy="pageImgArr[1]" alt="">
        <div class="goods" @click="goForGoodsDetail(1532787)"></div>
        <div class="goods type01" @click="goForGoodsDetail(1533199)"></div>
        <div class="goods type02" @click="goForGoodsDetail(1533199)"></div>
      </div>
      <div class="goods-menu">
        <img v-lazy="pageImgArr[2]" alt="">
        <div class="goods" @click="goForGoodsDetail(1533085)"></div>
        <div class="goods type01" @click="goForGoodsDetail(1532965)"></div>
        <div class="goods type02" @click="goForGoodsDetail(1533199)"></div>
      </div>
      <div class="goods-menu">
        <img v-lazy="pageImgArr[3]" alt="">
        <div class="goods" @click="goForGoodsDetail(1533093)"></div>
        <div class="goods type01" @click="goForGoodsDetail(1533047)"></div>
        <div class="goods type02" @click="goForGoodsDetail(1532965)"></div>
      </div>
      <div class="goods-menu">
        <img v-lazy="pageImgArr[4]" alt="">
        <div class="goods type02" @click="goForGoodsDetail(1533047)"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import MaskModal from 'components/maskDown/index.js'
  export default {
    data(){
      return{ pageImgArr:{} }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
    },
    methods:{
      initPageImg(){
        this.pageImgArr=[
          require('../../../assets/img/bpguActive/bpguActive01.jpg'),
          require('../../../assets/img/bpguActive/bpguActive02.jpg'),
          require('../../../assets/img/bpguActive/bpguActive03.jpg'),
          require('../../../assets/img/bpguActive/bpguActive04.jpg'),
          require('../../../assets/img/bpguActive/bpguActive05.jpg')
        ]
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    top: 0.2rem;right: 0;
    background: #f77c09;
    border-radius: 0.45rem 0 0 0.45rem;
  }
}
.goods-menu{
  position: relative;
  .goods{
    width: 3.42rem;
    height: 100%;
    position: absolute;
    top: 0;left: 0.21rem;
  }
  .type01{
    height: 80%;
    top: 1.1rem;
    left: 3.84rem;
  }
  .type02{
    height: 1.05rem;
    top: 0.05rem;
    left: 3.84rem;
  }
}
</style>